<template>
  <el-dialog :visible.sync="visible" @close="$emit('closePointMessage')" :close-on-click-modal="false">
    <el-form :inline="true" :model="formInline" class="demo-form-inline" @submit.native.prevent>
      <el-form-item v-if="isMuilUnitUser">
        <el-select filterable @change="getList(1)" v-model="formInline.orgIds" placeholder="请选择业主单位">
          <el-option
            v-for="item in orgOptionsAll"
            :key="item.organizationId"
            :label="item.shortName"
            :value="item.organizationId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="formInline.pointTypeId" placeholder="全部类别" filterable clearable @change="getList(1)">
          <el-option v-for="item in typeOptions" :key="item.id" :label="item.pointTypeName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model.trim="formInline.name"
          placeholder="请输入点位编码、名称、地址"
          @keyup.enter.native="getList(1)"
          clearable
          style="width:260px;"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="form-search-btn" type="primary" @click="getList(1)">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-if="tableDataLength"
      v-loading="loading"
      :data="tableData"
      height="529"
      border
      @selection-change="selectChange"
      highlight-current-row
      @row-click="handleRowClick"
      class="table-select"
      ref="pointTable"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="名称" prop="name" align="center"></el-table-column>
      <el-table-column label="编号" prop="pointCode" align="center"></el-table-column>
    </el-table>
    <div
      v-if="tableDataLength > 0"
      style="display:flex;justify-content: space-between;align-items:center;padding-bottom: 10px;"
    >
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20,50]"
        layout="total, sizes, prev, pager, next, jumper"
        :pager-count="5"
        :total="tableDataLength"
      ></el-pagination>
      <el-button type="primary" style="height: 40px;border:1px;margin-top:10px;" @click="confirmSelection">确定选择</el-button>
    </div>
    <div v-show="tableDataLength==0 && isShowEmpty" class="text-center" style="padding:10px 0;">
      <img :src="require('@/assets/images/inspect/no-point.png')" style="width:374px;height:280px;" />
    </div>
  </el-dialog>
</template>

<script>
import { getInspectPointNewList, getInspectPointTypeList } from '@/api/inspectx'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      pointSelection: [],
      isShowEmpty: false,
      visible: true,
      tableData: [],
      tableDataLength: 0,
      currentPage: 1,
      pageSize: 10,
      orgIds: '',
      formInline: {
        name: '',
        orgIds: '',
        pointTypeId: '',
      },
      typeOptions: [],
      loading: false,
    }
  },
  computed: {
    ...mapGetters([
      'isMuilUnitUser',
      'userOrgId',
      'userOrgIds',
      'orgOptionsAll',
    ]),
  },
  created() {
    this.formInline.orgIds = this.isMuilUnitUser
      ? this.userOrgIds
      : this.userOrgId
    this.getInspectPointTypeList()
    this.getList(1)
  },
  methods: {
    // 获取列表数据
    getList(currentPage) {
      if (currentPage) {
        this.currentPage = currentPage
      }
      this.loading = true
      getInspectPointNewList({
        queryType: 1,
        pageIndex: this.currentPage - 1,
        pageSize: this.pageSize,
        orgIds: this.formInline.orgIds,
        queryContent: this.formInline.name.trim(),
        pointTypeId: this.formInline.pointTypeId,
      }).then((res) => {
        this.tableDataLength = res.total
        this.tableData = res.data
        this.loading = false
        this.isShowEmpty = true
      })
    },
    // 获取点位类别
    getInspectPointTypeList() {
      getInspectPointTypeList({
        queryType: 0,
      }).then((res) => {
        this.typeOptions = res.data
      })
    },
    // 切换页条目数
    handleSizeChange(pageSize) {
      this.currentPage = 1
      this.pageSize = pageSize
      this.getList()
    },
    // 翻页
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.getList()
    },
    // 选项发生变化
    selectChange(pointSelection) {
      this.pointSelection = pointSelection
    },
    // 确认选择
    confirmSelection() {
      if (this.pointSelection.length > 100) {
        return this.$message.error('一次最多选择100个点位！')
      }
      if (this.pointSelection.length <= 0) {
        return this.$message.error('请选择点位数据！')
      }
      this.$emit('closePointMessage', this.pointSelection)
    },
    // 单选
    handleRowClick(row) {
      this.$refs.pointTable.toggleRowSelection(row)
    },
  },
}
</script>

<style lang="scss">
.table-select .cell, .table-select th>.cell{
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>